<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="健康记录"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 今日打卡 -->
    <div class="mx-4 mt-4">
      <div class="bg-white rounded-lg p-4 shadow-sm">
        <h3 class="font-bold text-gray-800 mb-3">今日打卡</h3>
        <div class="grid grid-cols-4 gap-3">
          <div 
            v-for="item in dailyTasks" 
            :key="item.name"
            class="text-center"
            @click="toggleTask(item)"
          >
            <div 
              class="w-12 h-12 rounded-full flex items-center justify-center mx-auto"
              :class="item.completed ? 'bg-green-100' : 'bg-gray-100'"
            >
              <van-icon 
                :name="item.icon" 
                :color="item.completed ? '#07c160' : '#969799'"
                size="24"
              />
            </div>
            <p class="text-xs mt-1 text-gray-600">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加记录 -->
    <div class="mx-4 mt-4">
      <van-button type="primary" block @click="showAddRecord = true">
        添加今日记录
      </van-button>
    </div>

    <!-- 记录列表 -->
    <div class="mx-4 mt-4">
      <h3 class="font-bold text-gray-800 mb-3">历史记录</h3>
      <div class="space-y-3">
        <div 
          v-for="record in healthRecords" 
          :key="record.id"
          class="bg-white rounded-lg p-4 shadow-sm"
        >
          <div class="flex justify-between items-start">
            <div>
              <p class="font-medium text-gray-800">{{ formatDate(record.recordDate) }}</p>
              <div class="mt-2 space-y-1">
                <p class="text-sm text-gray-600">体重: {{ record.weight }}kg</p>
                <p class="text-sm text-gray-600">睡眠: {{ record.sleepHours }}小时</p>
                <p class="text-sm text-gray-600">饮水: {{ record.waterIntake }}杯</p>
                <p class="text-sm text-gray-600">运动: {{ record.exerciseMinutes }}分钟</p>
              </div>
            </div>
            <van-icon name="edit" class="text-gray-400" @click="editRecord(record)" />
          </div>
        </div>
      </div>
    </div>

    <!-- 添加记录弹窗 -->
    <van-popup v-model:show="showAddRecord" position="bottom" round>
      <div class="p-4">
        <h3 class="font-bold text-lg mb-4">添加健康记录</h3>
        <van-form @submit="onSubmitRecord">
          <van-field
            v-model="newRecord.weight"
            label="体重"
            placeholder="请输入体重(kg)"
            type="number"
            :rules="[{ required: true, message: '请输入体重' }]"
          />
          <van-field
            v-model="newRecord.sleepHours"
            label="睡眠时长"
            placeholder="请输入睡眠时长(小时)"
            type="number"
            :rules="[{ required: true, message: '请输入睡眠时长' }]"
          />
          <van-field
            v-model="newRecord.waterIntake"
            label="饮水量"
            placeholder="请输入饮水量(杯)"
            type="number"
            :rules="[{ required: true, message: '请输入饮水量' }]"
          />
          <van-field
            v-model="newRecord.exerciseMinutes"
            label="运动时长"
            placeholder="请输入运动时长(分钟)"
            type="number"
            :rules="[{ required: true, message: '请输入运动时长' }]"
          />
          <van-field
            v-model="newRecord.notes"
            label="备注"
            type="textarea"
            rows="3"
            placeholder="添加备注信息"
          />
          <div class="mt-4">
            <van-button type="primary" block native-type="submit">
              保存记录
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useHealthStore } from '@/stores/health'
import { showToast } from 'vant'

const healthStore = useHealthStore()
const showAddRecord = ref(false)

const healthRecords = computed(() => healthStore.healthRecords)

const dailyTasks = ref([
  { name: '喝水', icon: 'water-o', completed: false },
  { name: '运动', icon: 'smile-o', completed: false },
  { name: '早睡', icon: 'clock-o', completed: false },
  { name: '冥想', icon: 'flower-o', completed: false }
])

const newRecord = ref({
  userId: 1,
  recordDate: new Date().toISOString().split('T')[0],
  weight: '',
  sleepHours: '',
  waterIntake: '',
  exerciseMinutes: '',
  notes: ''
})

const toggleTask = (task) => {
  task.completed = !task.completed
  showToast(task.completed ? `${task.name}打卡成功` : `取消${task.name}打卡`)
}

const onSubmitRecord = async () => {
  try {
    await healthStore.addHealthRecord(newRecord.value)
    showToast('记录添加成功')
    showAddRecord.value = false
    
    // 重置表单
    newRecord.value = {
      userId: 1,
      recordDate: new Date().toISOString().split('T')[0],
      weight: '',
      sleepHours: '',
      waterIntake: '',
      exerciseMinutes: '',
      notes: ''
    }
  } catch (error) {
    showToast('添加失败，请重试')
  }
}

const editRecord = (record) => {
  // 实现编辑功能
  console.log('编辑记录:', record)
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}
</script>
